<template>
	<div>

		<div class="page-bar">

			<ul class="page-breadcrumb">
				<li>
					<a @click="gobackProv">版本管理</a>
					<i class="fa fa-circle"></i>
				</li>
				<li>
					<span>版本新建</span>
				</li>
			</ul>

		</div>

		<el-row style="margin-top:20px">

			<el-col :span="6">&nbsp;</el-col>

			<el-col :span="12">

				<el-form :model="numberValidateForm"  :rules="rules" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
						<el-form-item label="版本号" prop="versionNo"  >
						<el-input type="versionNo" :maxlength="20" v-model="numberValidateForm.versionNo" auto-complete="off"></el-input>
					</el-form-item>
					<el-form-item label="APK上传" prop="downloadUrl">
						<el-input type="downloadUrl" readonly='readonly' v-model="numberValidateForm.downloadUrl" auto-complete="off" style='width:306px;'></el-input>
						<el-upload class="upload-demo upload-btn" action='' :before-upload="uploadFile">
							<el-button type="primary">选择文件</el-button>
						</el-upload>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('numberValidateForm')">确定</el-button>
						<el-button @click="gobackProv()">取消</el-button>
					</el-form-item>
				</el-form>
			</el-col>

			<el-col :span="6">&nbsp;</el-col>

		</el-row>

	</div>
</template>

<script>
	import { VersionSrv } from './version.service';
	import { Notification } from 'element-ui';
	export default {

		data() {
		    var validatorstyle =  (rule, value, callback) => {
                var patt = /^\d+(\.\d+)*$/;

                if (!patt.test(value)) {
                    callback('版本号格式不正确');
                } else {
                    callback();
                }
            }
            var validatoryes =  (rule, value, callback) => {
                var patt = /^\d+(\.\d+)*$/;

                if (value == '111') {
                    callback('版本号已经存在');
                } else {
                    callback();
                }
            }

			return {
                rules: {
                    versionNo: [{ required: true, message: '版本号不能为空'},
						{ validator: validatorstyle, trigger: 'blur' },
                        {
                            min: 1,
                            max:20,
                            message: '版本号必须为1 到 20 位',
                            trigger: 'blur'
                        },
						{ validator: validatoryes, trigger: 'blur' },
                    ],
                    downloadUrl:[
                        { required: true, message: ' '}]
                },
				numberValidateForm: {
					versionNo: '',
					downloadUrl: ''
				}
			};

		},

		methods: {
			gobackProv() {
				this.$router.push({
					name: 'version'
				});
			},

			uploadFile(file) {
				let fd = new FormData();
				fd.append('file', file);
				VersionSrv.uploadFile(fd).then(req => {
					if(req.code === 0) {
						this.numberValidateForm.downloadUrl = req.data.url;
					}
				})
				return false;
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						VersionSrv.addAPP(this.numberValidateForm).then(req => {
							if(req.code === 0) {
								Notification.success({
									title: '新建版本',
						          	message: '新建成功',
						          	offset: 50
						        })
								this.gobackProv();
							}
						})

					}
				});
			}
		}

	}
</script>

<style scoped>
	.el-upload__input {
		display: none !important;
	}
	
	.el-input2 {
		width: 100% !important;
	}
	
	.demo-ruleForm {
		width: 500px;
	}
	
	.el-form {
		width: 500px;
	}
	
	.upload-btn {
		width: 100px;
		float: right;
		margin-right: -12px;
	}
</style>